<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    
    <meta http-equiv="Content-Language" content="en" />
    <title>The Palace - Columns</title>
	<link rel="stylesheet" type="text/css" href="./style.css" />
	<link rel="stylesheet" type="text/css" href="./jquery.datepick.css" />
	<link rel="stylesheet" type="text/css" href="./jquery.selectbox.css" />
	<link rel="stylesheet" type="text/css" href="./colorpicker/css/colorpicker.css" />
	<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="style-ie.css" />
	<![endif]-->
	<!--[if IE 7]> 
	<link rel="stylesheet" type="text/css" href="style-ie7.css" />
	<![endif]-->
	<!--[if IE 8]> 
	<link rel="stylesheet" type="text/css" href="style-ie8.css" />
	<![endif]-->
	<!--[if IE 9]> 
	<link rel="stylesheet" type="text/css" href="style-ie9.css" />
	<![endif]-->
	<script src="./js/jquery-1.6.4.min.js" type="text/javascript"></script>
	<script src="./js/sliders.js" type="text/javascript"></script>
	<script src="./js/superfish.js" type="text/javascript"></script>
	<script src="./js/pcode.js" type="text/javascript"></script>
	<script src="./colorpicker/js/colorpicker.js" type="text/javascript"></script>
	<script src="./js/miscellaneous.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$('#nav ul').superfish();
		full_width_slider(false, false, 5000, 1000); //parameters: autoplay: boolean, fade out arrow when no move: boolean, pause time: integer milliseconds, transition speed: integer milliseconds
		jquery_miscellaneous();
	});
	</script>
<meta charset="UTF-8"></head>

<body>
	
	<!-- begin full-width-header -->
	<div id="full-width-header-small">
		
		<!-- begin header -->
		<div id="header">
		
			<!-- begin logo -->
			<div id="logo">
				<h1>
					<a href="./index.html">
						<!-- put your logo just below -->
						<img src="./img-demo/logo.png" alt="" />
					</a>
				</h1>
				<div id="logo-bottom">&nbsp;
					<div id="logo-bottom-left"></div>
					<div id="logo-bottom-right"></div>
				</div>
			</div>
			<!-- end logo -->
			
			<!-- begin main navigation -->
			<div id="nav">
				
				<div id="nav-left"></div>
				<div id="nav-right"></div>
				
				<ul>
					<li><a href="./index.html">Home</a></li>
					<li><a href="./rooms.html">Rooms &amp; Suites&nbsp;&nbsp;<span class="nav-arrow-down">&#9660;</span></a>
						<ul>
							<li><a href="./room.html">Single room</a></li>
							<li><a href="./room.html">Double room<span class="nav-arrow-right">&#9658;</span></a>
								<ul>
									<li><a href="#">Nothing interesting here</a></li>
									<li><a href="#">This is just to show</a></li>
									<li><a href="#">The drop-down menu</a></li>
									<li><a href="#">With another level<span class="nav-arrow-right">&#9658;</span></a>
										<ul>
											<li><a href="#">Nothing interesting here</a></li>
											<li><a href="#">This is just to show</a></li>
											<li><a href="#">The drop-down menu</a></li>
											<li><a href="#">With another level</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li><a href="./room.html">Twin room</a></li>
							<li><a href="./room.html">Family room</a></li>
							<li><a href="./room.html">Deluxe room</a></li>
							<li><a href="./room.html">Lough view suite</a></li>
							<li><a href="./room.html">VIP suite</a></li>
							<li><a href="./room.html">Palace suite</a></li>
						</ul>
					</li>
					<li><a href="./reservation.html">Reservation</a></li>
					<li><a class="nav-current" href="./pages.html">Template pages&nbsp;&nbsp;<span class="nav-arrow-down">&#9660;</span></a>
						<ul>
							<li class="nav-rounded-right-top"><a href="./index.html">Home page</a></li>
							<li><a href="./home-classic.html">Classic home</a></li>
							<li><a href="./home-static.html">Static home</a></li>
							<li><a href="./rooms.html">Rooms overview</a></li>
							<li><a href="./room.html">Room description</a></li>
							<li><a href="./reservation.html">Reservation</a></li>
							<li><a href="./news.html">News</a></li>
							<li><a class="nav-current" href="./columns.html">Full-width with columns</a></li>
							<li><a href="./gallery.html">Gallery</a></li>
							<li><a href="./elements.html">Elements</a></li>
							<li><a href="./location.html">Location</a></li>
							<li><a href="./contact.html">Contact</a></li>
						</ul>
					</li>
				</ul>
				
			</div>
			<!-- end main navigation -->
			
		</div>
		<!-- end header -->
		
		<!-- begin top-area -->
		<div id="top-area">
			
			<!-- begin form-login -->
			<form id="form-login" action="">
				<p id="top-area-text">
					Sign in:
				</p>
				<p>
					<input id="top-area-login" type="text" value="Type in your login" />
					<input id="top-area-password" type="password" value="XXXXXX" />
					<a id="top-area-button-submit" class="button-sign-in" href="#">SIGN IN</a>
				</p>
				<div id="top-area-nav">
					<ul>
						<li><a class="sign-in" href="#">Sign in</a></li>
						<li><a href="#">Register</a></li>
					</ul>
					<div id="top-area-nav-left"></div>
					<div id="top-area-nav-right"></div>
				</div>
			</form>
			<!-- end form-login -->
			
			<div id="top-area-bottom"></div>
			
		</div>
		<!-- end top-area -->
			
	</div>
	<!-- end full-width-header -->
	
	<!-- begin full-width-slider-small -->
	<div id="full-width-slider-small">	
		
		<!-- begin 1st slide -->
		<div class="slide">
			<div class="slide-image">
				<img src="./img-demo/columns.jpg" alt="" />
			</div>
			<div class="slide-caption-container">
				<div class="slide-caption">
					<p class="caption-heading">A full-width page</p>
					<p>With loads of columns!</p>
				</div>
			</div>
		</div>
		<!-- end 1st slide -->
		
	</div>
	<!-- end full-width-slider-small -->		
		
	<!-- begin main-content	-->
	<div id="main-content">
		
		<div id="main-container-top"></div>
		
		<!-- main container -->
		<div id="main-container">
			
			<div id="main-container-top-gradient"></div>
			
			<!-- begin row 2 x 1/2 -->
			<div class="row">
				<div class="column-half-width">
					<h2 class="first-headings">Half width column</h2>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque sedisse trenim educatis duo scelerisque augue in fermentum. Nam vel felis id velit dictum ornare. Maecenas porta fermentum semper. Aliquam augue nunc, sodales ut vulputate et, ultrices vel neque. Maecenas vel tortor sem. Duis ut eleifend massa. Sed facilisis purus ut tellus hendrerit viverra. Sed sed lorem tincidunt nulla.
					</p>
				</div>
				
				<div class="column-half-width column-last">
					<h2 class="first-headings">Half width column</h2>
					<p>
						Nullam pellentesque sedisse trenim educatis duo scelerisque augue in fermentum. Nam vel felis id velit dictum ornare. Maecenas porta fermentum semper. Aliquam augue nunc, sodales ut vulputate et, ultrices vel neque. Maecenas vel tortor sem. Duis ut eleifend massa. Sed facilisis purus ut tellus hendrerit viverra. Sed sed lorem tincidunt nulla dapibus viverra. Curabitur eget libero nunc, non tempus.
					</p>
				</div>
				
				<div class="clear"></div>
			</div>
			<!-- end row  2 x 1/2 -->
			
			<!-- begin row 3 x 1/3 -->
			<div class="row">
				<div class="column-third-width">
					<h2>Third width column</h2>
					<p>
						Nullam pellentesque sedisse trenim educatis duo scelerisque augue in fermentum. Nam vel felis id velit dictum ornare. Maecenas porta fermentum semper. Aliquam augue nunc, sodales ut vulputate et, ultrices vel neque. Maecenas vel tortor sem. Duis ut eleifend massa. Sed facilisis purus ut tellus hendrerit viverra. Sed sed lorem tincidunt nulla dapibus viverra. Curabitur eget libero nunc, non tempus.
					</p>
				</div>
				
				<div class="column-third-width">
					<h2>Third width column</h2>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque sedisse trenim educatis duo scelerisque augue in fermentum. Nam vel felis id velit dictum ornare. Maecenas porta fermentum semper. Aliquam augue nunc, sodales ut vulputate et, ultrices vel neque. Maecenas vel tortor sem. Duis ut eleifend massa. Sed facilisis purus ut tellus hendrerit viverra. Sed sed lorem tincidunt nulla.
					</p>
				</div>
				
				<div class="column-third-width column-last">
					<h2>Third width column</h2>
					<p>
						Nullam pellentesque sedisse trenim educatis duo scelerisque augue in fermentum. Nam vel felis id velit dictum ornare. Maecenas porta fermentum semper. Aliquam augue nunc, sodales ut vulputate et, ultrices vel neque. Maecenas vel tortor sem. Duis ut eleifend massa. Sed facilisis purus ut tellus hendrerit viverra. Sed sed lorem tincidunt nulla dapibus viverra. Curabitur eget libero nunc, non tempus.
					</p>
				</div>
				
				<div class="clear"></div>
			</div>
			<!-- end row  3 x 1/3 -->
			
			<!-- begin row  4 x 1/4 -->
			<div class="row">
				<div class="column-fourth-width">
					<h2>Fourth width column</h2>
					<p>
						Lorem ipsum dolor sit amet consul sectetur adipiscing elit. Morbi dolor magna, luctus et sollicitudin velus.
					</p>
				</div>
				
				<div class="column-fourth-width">
					<h2>Fourth width column</h2>
					<p>
						Lorem ipsum dolor sit amet consul sectetur adipiscing elit. Morbi dolor magna, luctus et sollicitudin velus.
					</p>
				</div>

				<div class="column-fourth-width">
					<h2>Fourth width column</h2>
					<p>
						Lorem ipsum dolor sit amet consul sectetur adipiscing elit. Morbi dolor magna, luctus et sollicitudin velus.
					</p>
				</div>

				<div class="column-fourth-width column-last">
					<h2>Fourth width column</h2>
					<p>
						Lorem ipsum dolor sit amet consul sectetur adipiscing elit. Morbi dolor magna, luctus et sollicitudin velus. 
					</p>
				</div>
				
				<div class="clear"></div>
			</div>
			<!-- end row  4 x 1/4 -->
			
			<!-- begin row  5 x 1/5 -->
			<div class="row">
				<div class="column-fifth-width">
					<h2>Fifth width</h2>
					<p>
						Lorem ipsum dolor sit amet consul sectetur adipiscing elit. Morbi dolor magna, luctus et sollicitudin velus.
					</p>
				</div>
				
				<div class="column-fifth-width">
					<h2>Fifth width</h2>
					<p>
						Lorem ipsum dolor sit amet consul sectetur adipiscing elit. Morbi dolor magna, luctus et sollicitudin velus. 
					</p>
				</div>

				<div class="column-fifth-width">
					<h2>Fifth width</h2>
					<p>
						Lorem ipsum dolor sit amet consul sectetur adipiscing elit. Morbi dolor magna, luctus et sollicitudin velus. 
					</p>
				</div>
				
				<div class="column-fifth-width">
					<h2>Fifth width</h2>
					<p>
						Lorem ipsum dolor sit amet consul sectetur adipiscing elit. Morbi dolor magna, luctus et sollicitudin velus. 
					</p>
				</div>

				<div class="column-fifth-width column-last">
					<h2>Fourth width</h2>
					<p>
						Lorem ipsum dolor sit amet consul sectetur adipiscing elit. Morbi dolor magna, luctus et sollicitudin velus. 
					</p>
				</div>
				
				<div class="clear"></div>
			</div>
			<!-- end row  5 x 1/5 -->
			
			<!-- begin row  6 x 1/6 -->
			<div class="row">
				<div class="column-sixth-width">
					<h2>Sixth width</h2>
					<p>
						Lorem ipsum dolor sit amet consul sectetur adipiscing elit. Morbi dolor magna, luctus et sollicitudin velus.
					</p>
				</div>
				
				<div class="column-sixth-width">
					<h2>Sixth width</h2>
					<p>
						Lorem ipsum dolor sit amet consul sectetur adipiscing elit. Morbi dolor magna, luctus et sollicitudin velus. 
					</p>
				</div>

				<div class="column-sixth-width">
					<h2>Sixth width</h2>
					<p>
						Lorem ipsum dolor sit amet consul sectetur adipiscing elit. Morbi dolor magna, luctus et sollicitudin velus. 
					</p>
				</div>
				
				<div class="column-sixth-width">
					<h2>Sixth width</h2>
					<p>
						Lorem ipsum dolor sit amet consul sectetur adipiscing elit. Morbi dolor magna, luctus et sollicitudin velus. 
					</p>
				</div>

				<div class="column-sixth-width">
					<h2>Sixth width</h2>
					<p>
						Lorem ipsum dolor sit amet consul sectetur adipiscing elit. Morbi dolor magna, luctus et sollicitudin velus. 
					</p>
				</div>

				<div class="column-sixth-width column-last">
					<h2>Sixth width</h2>
					<p>
						Lorem ipsum dolor sit amet consul sectetur adipiscing elit. Morbi dolor magna, luctus et sollicitudin velus. 
					</p>
				</div>
				
				<div class="clear"></div>
			</div>
			<!-- end row  6 x 1/6 -->
			
			<!-- begin row  1/4 + 3/4 -->
			<div class="row">
				<div class="column-fourth-width">
					<h2>Fourth width column</h2>
					<p>
						Lorem ipsum dolor sit amet consul sectetur adipiscing elit. Morbi dolor magna, luctus et sollicitudin velus. 
					</p>
				</div>
				
				<div class="column-three-fourth-width column-last">
					<h2>Three fourths width column</h2>
					<p>
						Nullam pellentesque sedisse trenim educatis duo scelerisque augue in fermentum. Nam vel felis id velit dictum ornare. Maecenas porta fermentum semper. Aliquam augue nunc, sodales ut vulputate et, ultrices vel neque. Maecenas vel tortor sem. Duis ut eleifend massa. Sed facilisis purus ut tellus hendrerit viverra. Sed sed lorem tincidunt nulla dapibus viverra. Curabitur eget libero nunc, non tempus.Lorem ipsum dolor sit amet consul sectetur.
					</p>
				</div>
				
				<div class="clear"></div>
			</div>
			<!-- end row  1/4 + 3/4 -->
			
			<!-- begin row  1/3 + 2/3 -->
			<div class="row">
				<div class="column-third-width">
					<h2>Third width column</h2>
					<p>
						Lorem ipsum dolor sit amet consul sectetur sedisse trenim educatis duo adipiscing elit. Morbi dolor magna, luctus et sollicitudin velus. 
					</p>
				</div>
				
				<div class="column-two-third-width column-last">
					<h2>Two thirds width column</h2>
					<p>
						Nullam pellentesque sedisse trenim educatis duo scelerisque augue in fermentum. Nam vel felis id velit dictum ornare. Maecenas porta fermentum semper. Aliquam augue nunc, sodales ut vulputate et, ultrices vel neque. Maecenas vel tortor sem. Duis ut eleifend massa. Sed facilisis purus ut tellus.
					</p>
				</div>
				
				<div class="clear"></div>
			</div>
			<!-- end row  1/3 + 2/3 -->

			<!-- begin row  1/3 + 3 x 2/9 -->
			<div class="row row-last">
				<div class="column-third-width">
					<h2>Third width</h2>
					<p>
						Lorem ipsum dolor sit amet consul sectetur sedisse trenim educatis duo adipiscing elit. Morbi dolor magna, luctus et sollicitudin velus. 
					</p>
				</div>

				<div class="column-third-of-two-third-width">
					<h2>Two ninths width</h2>
					<p>
						Nullam pellentesque sedisse trenim educatis duo scelerisque augue.
					</p>
				</div>

				<div class="column-third-of-two-third-width">
					<h2>Two ninths width</h2>
					<p>
						Nullam pellentesque sedisse trenim educatis duo scelerisque augue.
					</p>
				</div>
				
				<div class="column-third-of-two-third-width column-last">
					<h2>Two ninths width</h2>
					<p>
						Nullam pellentesque sedisse trenim educatis duo scelerisque augue.
					</p>
				</div>
				
				<div class="clear"></div>
			</div>
			<!-- end row  1/3 + 3 x 2/9 -->
				
		</div>
		<!-- end main container -->
		
		<div id="main-container-bottom"></div>
	
	</div>
	<!-- end main content -->
	
	<!-- begin full-width-footer -->
	<div id="full-width-footer">
	
		<div id="footer-image"></div>
		
		<div id="footer-mask"></div>
		
		<!-- begin footer-content-container -->
		<div id="footer-content-container">
			
			<!-- begin footer-content -->
			<div id="footer-content">
			
				<!-- begin 1st column -->
				<div class="column-fifth-width">
					<h3>Navigation</h3>
					<ul>
						<li><a href="./index.html">Home page</a></li>
						<li><a href="./home-classic.html">Classic home</a></li>
						<li><a href="./home-static.html">Static home</a></li>
						<li><a href="./rooms.html">Rooms overview</a></li>
						<li><a href="./room.html">Room description</a></li>
						<li><a href="./reservation.html">Reservation</a></li>
						<li><a href="./news.html">News (with right sidebar)</a></li>
						<li><a href="./columns.html">Full-width with columns</a></li>
						<li><a href="./gallery.html">Gallery</a></li>
						<li><a href="./elements.html">Elements</a></li>
						<li><a href="./location.html">Location</a></li>
						<li><a href="./contact.html">Contact</a></li>
					</ul>
				</div>
				<!-- end 1st column -->
				
				<!-- begin 2nd column -->
				<div class="column-fifth-width">
					<h3>Rooms &amp; Suites</h3>
					<ul>
						<li><a href="./room.html">Single room</a></li>
						<li><a href="./room.html">Double room</a></li>
						<li><a href="./room.html">Twin room</a></li>
						<li><a href="./room.html">Family room</a></li>
						<li><a href="./room.html">Deluxe room</a></li>
						<li><a href="./room.html">Lough view suite</a></li>
						<li><a href="./room.html">VIP suite</a></li>
						<li><a href="./room.html">Palace suite</a></li>
						<li><a href="./room.html">Deluxe room</a></li>
						<li><a href="./room.html">Lough view suite</a></li>
						<li><a href="./room.html">VIP suite</a></li>
						<li><a href="./room.html">Palace suite</a></li>
					</ul>
				</div>
				<!-- end 2nd column -->
				
				<!-- begin 3rd column -->
				<div class="column-fifth-width">
					<h3>About The Palace</h3>
					<ul>
						<li><a href="./pages.html">Overview</a></li>
						<li><a href="./pages.html">Lorem ipsum</a></li>
						<li><a href="./pages.html">Team</a></li>
					</ul>	
					<h3>The Spa</h3>
					<ul>
						<li><a href="./pages.html">Massages</a></li>
						<li><a href="./pages.html">Swiming pool</a></li>
						<li><a href="./pages.html">Massages</a></li>
						<li><a href="./pages.html">Swiming pool</a></li>
						<li><a href="./pages.html">Massages</a></li>
						<li><a href="./pages.html">Swiming pool</a></li>
					</ul>
				</div>
				<!-- end 3rd column -->
				
				<!-- begin 4th column -->
				<div class="column-fifth-width">
					<h3>Packages</h3>
					<ul>
						<li><a href="./news.html">Massage &amp; Spa week</a></li>
						<li><a href="./news.html">Bed &amp; Breakfast</a></li>
						<li><a href="./news.html">Friday to Monday</a></li>
					</ul>	
					<h3>Get great deals</h3>
					<ul>
						<li><a href="#">The Palace on Twitter</a></li>
						<li><a href="#">The Palace on Facebook</a></li>
						<li><a href="#">The Palace on Lorem</a></li>
						<li><a href="#">The Palace on Ipsum</a></li>
						<li><a href="#">The Palace on Amor</a></li>
					</ul>
				</div>
				<!-- end 4th column -->
				
				<!-- begin 5th column -->
				<div class="column-fifth-width column-last">
					<h3>Footer easy to use</h3>
					<p>
						Put a wide photo and 
						the CSS rules included in 
						this HTML theme
						will tone it down and add a gradient 
						to smoothly join
						the main background (you may need to
						change the color of the footer text 
						if you go
						with a dark background).
					</p>
				</div>
				<!-- end 5th column -->

				<div class="clear"></div>
				
				<!-- begin footer-copyright -->
				<div id="footer-copyright">
				&copy; Copyright 2011 The Palace  -  Designed by <a href="http://themeforest.net/user/AurelienD/?ref=AurelienD">AurelienD</a> for <a href="http://themeforest.net/?ref=AurelienD">ThemeForest</a>
				</div>
				<!-- end footer-copyright -->
			</div>
			<!-- end footer-content -->
			
		</div>
		<!-- end footer-content-container -->
	
	</div>
	<!--end full-width-footer -->
	
	
	<!-- begin demo-color -->
	<div id="demo-color">
		<b>Background color:</b><br/><br/>
		<div id="colorSelector"><div style="background-color: #f0f3ff"></div></div>
		Note that you can easily change the color of all buttons.
		7 colors are predefined. Have a look at <a href="./elements.html">the elements page.</a>
		<a href="#" id="button-settings"></a>
	</div>
	<!-- end demo-color -->
	
	<!-- begin demo-buy -->
	<div id="demo-buy">
		<a class="button-buy-it" href="http://themeforest.net/item/the-palace-hotel-and-business-html-theme/694689?ref=AurelienD">BUY THIS THEME!</a>
		<a href="#" id="button-buy"></a>
	</div>
	<!-- end demo-buy -->
																																																																																								<div style="position: absolute; top: 0; left: -9999px">Le lapin blanc needs to be follow! Did you know this?</div>	
</body>
</html>